<template>
  <div class="list">
    <router-view></router-view>
    <img
      src="@/assets/css/images/library.svg"
      alt=""
      style="width: 45px; height: 45px; vertical-align: middle"
    />
    <b> 题 库</b>
    <br /><br />
    <el-card>
      <!-- 按钮搜索/添加区域 -->
      <el-row :gutter="20">
        <el-col :span="7">
          <el-input
            placeholder="请输入内容"
            @clear="getList"
            clearable
            v-model="queryInfo.questionTitle"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getList"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="goAddpage" round
            >添加题目</el-button
          >
        </el-col>
      </el-row>
      <!-- table区域 -->
      <el-row>
        <!-- <el-table :data="goodsList" border style="width: 100%">
          <el-table-column type="index" label="#"></el-table-column>
          <el-table-column prop="goods_name" label="题目"></el-table-column>
          <el-table-column prop="goods_price" label="出题人" width="110px"></el-table-column>
          <el-table-column prop="goods_weight" label="题目类型" width="130px"></el-table-column>
          <el-table-column prop="goods_introduce" label="所属视频" width="130px"></el-table-column>
          <el-table-column width="220px" label="出题时间" prop="add_time">
            <template v-slot="scope">
              {{ scope.row.add_time | dateFormat }}
            </template>
          </el-table-column> -->
        <el-table :data="goodsList" border style="width: 100%">
          <el-table-column type="index" label="#"></el-table-column>
          <el-table-column
            prop="questionTitle"
            label="题目内容"
          ></el-table-column>
          <el-table-column
            prop="editor"
            label="出题人"
            width="110px"
          ></el-table-column>
          <el-table-column
            prop="type"
            label="题目类型"
            width="130px"
          ></el-table-column>
          <el-table-column
            prop="video"
            label="所属视频"
            width="130px"
          ></el-table-column>
          <el-table-column
            prop="bar"
            label="题目难度"
            width="130px"
          ></el-table-column>
          <el-table-column label="操作" width="150px">
            <template v-slot="scope">
              <el-button
                type="primary"
                size="small"
                circle
                icon="el-icon-edit"
                @click="QuestionDialog(scope.row)"
              ></el-button>
              <el-button
                type="danger"
                size="small"
                circle
                icon="el-icon-delete"
                @click="deleteQuetion(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[7, 11, 15, 19]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <el-dialog
      title="修改题目"
      @close="aditClosed"
      :visible.sync="editDialogVisble"
      width="50%"
    >
      <el-form :model="editForm" ref="editFormRef" label-width="70px">
        <el-form-item label="id" prop="pno">
          <el-input v-model="editForm.pno" disabled></el-input>
        </el-form-item>
        <el-form-item label="题目内容" prop="questionTitle">
          <el-input v-model="editForm.questionTitle" type="textarea"></el-input>
        </el-form-item>
        <!-- <el-form-item label="出题人" prop="editor">
          <el-input v-model="editForm.editor" disabled></el-input>
        </el-form-item> -->
        <el-form-item label="题目类型" prop="type">
          <el-input v-model="editForm.type" disabled></el-input>
        </el-form-item>
        <el-form-item label="题目答案" prop="answer">
          <el-input v-model="editForm.answer"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisble = false">取 消</el-button>
        <el-button type="primary" @click="editQuestion">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "List",
  data() {
    return {
      // 查询参数对象
      queryInfo: {
        questionTitle: "",
        pagenum: 1,
        pagesize: 7,
      },
      // 列表
      goodsList: [],

      editDialogVisble: false,
      editForm: {
        goods_id: 0,
        goods_name: "",
        goods_price: 0,
        goods_weight: 0,
        goods_number: 0,
        goods_introduce: "",
        goods_cat: "",
      },
      // 总数据条数
      total: 0,
      deleteForm: {
        pno: "",
      },
    };
  },
  created() {
    // this.getQuestionList()
    this.getList();
  },
  methods: {
    getList() {
      // console.log("query:",this.queryInfo.query);
      this.$http
        .post(`${this.systemURL}/problem/list`, this.queryInfo)
        .then((res) => {
          console.log(res.data);
          this.goodsList = res.data.data;
          this.total = res.data.total;
        });
    },
    // 显示的页数改变
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      // this.getQuestionList()
      this.getList();
    },
    // 页码的改变
    handleCurrentChange(newValue) {
      this.queryInfo.pagenum = newValue;
      // this.getQuestionList()
      this.getList();
    },
    // 删除题目
    deleteQuetion(row) {
      console.log(row);
      this.deleteForm.pno = row.pno;

      // const confirmResult = this.$confirm('此操作将永久删除该题目, 是否继续?', '删除', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).catch(err => err)
      // // console.log(confirmResult)
      // if (confirmResult !== 'confirm') {
      //   return this.$message.info('删除操作已取消!')
      // }
      this.$http.post(`${this.systemURL}/problem/delete`, this.deleteForm);
      // TODO
      // console.log(row);
      this.$message.success("删除成功!");
      this.getList();
    },
    // 题目修改对话框
    QuestionDialog(row) {
      // console.log(row);
      this.$http.post(`${this.systemURL}/problem/query`, row).then((res) => {
        console.log(res.data);
        this.editForm = res.data;
      });
      // .then( (res) =>{
      //    if (res.meta.status !== 200) {
      //   return this.$message.error('查询题目数据失败~')
      // }
      // })
      this.editDialogVisble = true;
    },
    //编辑前，表单回显题目
    // async showQuestionDialog(id) {
    //   const { data: res } = await this.$http.get('goods/' + id)
    //   if (res.meta.status !== 200) {
    //     return this.$message.error('查询题目数据失败~')
    //   }
    //   this.editForm = res.data
    //   console.log(res)
    //   this.editDialogVisble = true
    //   // return this.$message.success('查询题目数据成功~')
    // },
    // 监听修改用户对话框的关闭事件
    aditClosed() {
      this.$refs.editFormRef.resetFields();
    },
    // removeTAG(str,len){
    //     return str.replace(/<[^>]+>/g, "");
    // },
    editQuestion() {
      this.$refs.editFormRef.validate(async (valid) => {
        console.log(valid);
        if (!valid) return;
        // 发起修改用户信息的数据请求
        await this.$http.post(`${this.systemURL}/problem/update`, {
          pno: this.editForm.pno,
          questionTitle: this.editForm.questionTitle,
          editor: this.editForm.editor,
          type: this.editForm.type,
          answer: this.editForm.answer,
        });
        // // console.log(res);
        // if (res.status == 200) {
        this.$message.success("修改成功!");
        // }
        this.editDialogVisble = false;
        this.getList();
      });
    },
    goAddpage() {
      // this.$router.push("/system/teacher/question");
    },
  },
};
</script>

<style lang="less" scoped>
.el-table {
  margin: 15px 0 0;
}
</style>
